﻿@using OTE.Web.Infrastructure.Helper
@model OTE.Web.Mvc.ViewModels.Question.UpdateQuestionViewModel
@{Html.BeginForm("Update", "Question", new { area = "Admin" }, FormMethod.Post, new { id = "infoForm" });
    <script type="text/javascript" src="@Url.Script("jquery.validate.min.js")"></script>
    <!-- start id-form -->
    <div class="maincontent clearfix">
        <table border="0" cellpadding="0" cellspacing="0" id="id-form">
            <tr>
                <th valign="top">
                    Category:
                </th>
                <td>
                    @if (Model.ParentCategories.FirstOrDefault() != null)
                    {
                        @Html.DropDownListFor(model => model.CatSelectedId, new SelectList(Model.ParentCategories, "Id", "Name"), new { id = "ParentCat", name = "ParentCat" })
                    }
                </td>
            </tr>
            <tr id="childCategoryRow" @Html.Raw(Model.ChildCategories.FirstOrDefault() == null ? "style='display: none;'" : "")>
                <th valign="top">
                    Child Category:
                </th>
                <td>
                    @if (Model.ChildCategories.FirstOrDefault() != null)
                    {
                        @Html.DropDownList("ChildCategory", new SelectList(Model.ChildCategories, "Id", "Name", Model.ChildCatId), " ", new { id = "ChildCategory" })
                    }
                    else
                    {
                        <select id="ChildCategory" name="ChildCategory">
                        </select>
                    }
                </td>
            </tr>
            <tr>
                <th valign="top">
                    Content:
                </th>
                <td>
                    @Html.TextBoxFor(x => x.Content, new { @class = "inp-form" })
                </td>
            </tr>
        </table>
        <!-- end id-form  -->
        <div style="float: left; margin-right: 30px; margin-top: 40px;">
            @Html.HiddenFor(q => q.Id)
            <input type="submit" value="" class="form-submit" />
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#ParentCat').change(function (e) {
                $("#childCategoryRow").hide();
                var selValue = $(this).val();
                if (selValue != "")
                {
                    $('#hdCatSelectedId').attr('value', selValue);
                    //get child list
                    $.getJSON("/Admin/Question/GetChildCategory/" + selValue, null, function (data) {
                        if (data != "" && data.length > 1) {
                            $("#ChildCategory").fillSelect(data);
                            $("#childCategoryRow").show();
                        }
                    });
                }
            });

            $('#ChildCategory').change(function (e) {
                var selValue = $(this).val();
                if (selValue != "")
                    $('#hdCatSelectedId').attr('value', selValue);
                else
                    $('#hdCatSelectedId').attr('value', $("#ParentCat").val());
            });
        $("#infoForm").validate({
            rules:
            {
                CatSelectedId : { required: true },
                Content: { required: true }
            },
            messages:
            {
                CatSelectedId : { required: 'Please select a category.' },
                Content: { required: 'Please input content.' }
            },
//            errorElement: "div"
        })
    });
    </script>
    Html.EndForm();}